<template>
  <div class="example-container">
    <h2>API调用示例</h2>

    <div class="section">
      <h3>用户登录</h3>
      <button @click="handleLogin">登录</button>
      <button @click="handleGetUserInfo">获取用户信息</button>
      <button @click="handleLogout">退出登录</button>
    </div>

    <div class="section">
      <h3>照片管理</h3>
      <button @click="handleGetPhotoList">获取照片列表</button>
      <input type="file" @change="handleFileChange" accept="image/*">
      <button @click="handleUploadPhoto" :disabled="!selectedFile">上传照片</button>
    </div>

    <div class="result" v-if="result">
      <h3>返回结果:</h3>
      <pre>{{ JSON.stringify(result, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { userApi, photoApi } from '@/api'
import { tokenUtils } from '@/utils/token'

export default {
  name: 'Example',
  setup() {
    const result = ref(null)
    const selectedFile = ref(null)

    const handleLogin = async () => {
      try {
        const response = await userApi.login({
          username: 'test',
          password: '123456'
        })
        result.value = response
        if (response.token) {
          tokenUtils.set(response.token)
        }
      } catch (error) {
        result.value = { error: error.message }
      }
    }

    const handleGetUserInfo = async () => {
      try {
        const response = await userApi.getUserInfo()
        result.value = response
      } catch (error) {
        result.value = { error: error.message }
      }
    }

    const handleLogout = async () => {
      try {
        await userApi.logout()
        tokenUtils.remove()
        result.value = { message: '退出成功' }
      } catch (error) {
        result.value = { error: error.message }
      }
    }

    const handleGetPhotoList = async () => {
      try {
        const response = await photoApi.getPhotoList({
          page: 1,
          size: 10
        })
        result.value = response
      } catch (error) {
        result.value = { error: error.message }
      }
    }

    const handleFileChange = (event) => {
      selectedFile.value = event.target.files[0]
    }

    const handleUploadPhoto = async () => {
      if (!selectedFile.value) return

      try {
        const formData = new FormData()
        formData.append('file', selectedFile.value)

        const response = await photoApi.uploadPhoto(formData)
        result.value = response
      } catch (error) {
        result.value = { error: error.message }
      }
    }

    return {
      result,
      selectedFile,
      handleLogin,
      handleGetUserInfo,
      handleLogout,
      handleGetPhotoList,
      handleFileChange,
      handleUploadPhoto
    }
  }
}
</script>

<style scoped>
.example-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.section h3 {
  margin-top: 0;
  color: #333;
}

button {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

input[type="file"] {
  margin-right: 10px;
  margin-bottom: 10px;
}

.result {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

pre {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  border: 1px solid #ddd;
}
</style>